<template>
    <h4>用户统计</h4>
    <el-row :gutter="12">
        <el-col :span="3"></el-col>
        <el-col :span="6">
            <el-card class="box-card">
                <div>总用户人数：</div>
                <div>{{ num }}</div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card">
                <div>今日新增用户人数：</div>
                <div>{{ day1 }}</div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card">
                <div>昨日新增用户人数：</div>
                <div>{{ day2 }}</div>
            </el-card>
        </el-col>
    </el-row>
    <div id="main"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import http from '../util/api';

type EChartsOption = echarts.EChartsOption
let option: EChartsOption;
const app: any = {};

// 今天是几号
let data = new Date().getDate();
// 月份
const datas: any = new Date().getMonth() - 1;
let datase: any = new Date().getMonth() + 1;
// 存储月份日期数据
const add: any = ref([]);

// 月份数据
const yue: any = ref([
  30, 28, 30, 29, 30, 29, 30, 30, 29, 30, 29, 30,
]);
// 日期数据
const dataDay: any = ref([]);

// 请求数据
const getDataList = () => {
  http('/userlist').then((res: any) => {
    dataDay.value = res.data;
    // eslint-disable-next-line no-use-before-define
    getD();
  });
};
// 总人数
const num: any = ref(0);
// 今日新增
const day1: any = ref(0);
// 昨日新增
const day2: any = ref(0);
// 最前5天的数据
const day3: any = ref(0);
const day4: any = ref(0);
const day5: any = ref(0);
const day6: any = ref(0);
const day7: any = ref(0);
const day8: any = ref(0);
// 设置图表y轴的值
const dataY = ref(50);
// 过滤日期数据显示新增人数
const getD = () => {
  num.value = dataDay.value.length;
  // eslint-disable-next-line no-plusplus
  for (let j = 0; j < dataDay.value.length; j++) {
    // 今日新增
    // eslint-disable-next-line eqeqeq
    if (`${add.value[0][1]}-${add.value[0][0]}` == `${dataDay.value[j].day[0].m}-${dataDay.value[j].day[1].d}`) {
      day1.value += 1;
    }
    // 昨日新增
    // eslint-disable-next-line eqeqeq
    if (`${add.value[1][1]}-${add.value[1][0]}` == `${dataDay.value[j].day[0].m}-${dataDay.value[j].day[1].d}`) {
      day2.value += 1;
    }
    // 最前5天的数据
    // eslint-disable-next-line eqeqeq
    if (`${add.value[2][1]}-${add.value[2][0]}` == `${dataDay.value[j].day[0].m}-${dataDay.value[j].day[1].d}`) {
      day3.value += 1;
    }
    // eslint-disable-next-line eqeqeq
    if (`${add.value[3][1]}-${add.value[3][0]}` == `${dataDay.value[j].day[0].m}-${dataDay.value[j].day[1].d}`) {
      day4.value += 1;
    }
    // eslint-disable-next-line eqeqeq
    if (`${add.value[4][1]}-${add.value[4][0]}` == `${dataDay.value[j].day[0].m}-${dataDay.value[j].day[1].d}`) {
      day5.value += 1;
    }
    // eslint-disable-next-line eqeqeq
    if (`${add.value[5][1]}-${add.value[5][0]}` == `${dataDay.value[j].day[0].m}-${dataDay.value[j].day[1].d}`) {
      day6.value += 1;
    }
    // eslint-disable-next-line eqeqeq
    if (`${add.value[6][1]}-${add.value[6][0]}` == `${dataDay.value[j].day[0].m}-${dataDay.value[j].day[1].d}`) {
      day7.value += 1;
    }
    // 第八天数据
    // eslint-disable-next-line eqeqeq
    if (`${add.value[7][1]}-${add.value[7][0]}` == `${dataDay.value[j].day[0].m}-${dataDay.value[j].day[1].d}`) {
      day8.value += 1;
    }
  }
  // 判断图表y轴的值
  if (num.value > dataY.value) {
    dataY.value += 50;
  }
  // eslint-disable-next-line no-use-before-define
  getE();
};

// 过滤日期显示图片里的日期数据
const getDate = () => {
  // 日
  let a;
  // 天
  let c;
  // eslint-disable-next-line no-plusplus
  for (let i = 0; i <= 7; i++) {
    a = data;
    // eslint-disable-next-line no-plusplus
    data--;
    c = datase;
    // eslint-disable-next-line eqeqeq
    if (a == 0) {
      a = yue.value[datas];
      data = a - 1;
      c = datase - 1;
      datase -= 1;
    }
    add.value.push([a, c]);
  }
};

onMounted(() => {
  getDate();
  getDataList();
});
const getE = () => {
  const chartDom = document.getElementById('main')!;
  const myChart = echarts.init(chartDom);
  const posList = [
    'left',
    'right',
    'top',
    'bottom',
    'inside',
    'insideTop',
    'insideLeft',
    'insideRight',
    'insideBottom',
    'insideTopLeft',
    'insideTopRight',
    'insideBottomLeft',
    'insideBottomRight',
  ] as const;
  app.configParameters = {
    rotate: {
      min: -90,
      max: 90,
    },
    align: {
      options: {
        left: 'left',
        center: 'center',
        right: 'right',
      },
    },
    verticalAlign: {
      options: {
        top: 'top',
        middle: 'middle',
        bottom: 'bottom',
      },
    },
    position: {
      options: posList.reduce((map, pos) => {
        // eslint-disable-next-line no-param-reassign
        map[pos] = pos;
        return map;
      }, {} as Record<string, string>),
    },
    distance: {
      min: 0,
      max: 100,
    },
  };
    type BarLabelOption = NonNullable<echarts.BarSeriesOption['label']>;
    app.config = {
      rotate: 0,
      align: 'center',
      verticalAlign: 'middle',
      position: 'insideBottom',
      distance: 20,
      onChange() {
        const labelOption: BarLabelOption = {
          rotate: app.config.rotate as BarLabelOption['rotate'],
          align: app.config.align as BarLabelOption['align'],
          verticalAlign: app.config
            .verticalAlign as BarLabelOption['verticalAlign'],
          position: app.config.position as BarLabelOption['position'],
          distance: app.config.distance as BarLabelOption['distance'],
        };
        myChart.setOption<echarts.EChartsOption>({
          series: [
            {
              label: labelOption,
            },
            {
              label: labelOption,
            },
            {
              label: labelOption,
            },
            {
              label: labelOption,
            },
          ],
        });
      },
    };
    const labelOption: BarLabelOption = {
      show: true,
      position: app.config.position as BarLabelOption['position'],
      distance: app.config.distance as BarLabelOption['distance'],
      align: app.config.align as BarLabelOption['align'],
      verticalAlign: app.config.verticalAlign as BarLabelOption['verticalAlign'],
      rotate: app.config.rotate as BarLabelOption['rotate'],
      formatter: '{c}',
      fontSize: 10,
      rich: {
        name: {},
      },
    };
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        data: ['总人数', '今日新增', '昨日新增'],
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar', 'stack'] },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      xAxis: [
        {
          type: 'category',
          name: '日期',
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          data: [`${add.value[0][1]}-${add.value[0][0]}`, `${add.value[1][1]}-${add.value[1][0]}`, `${add.value[2][1]}-${add.value[2][0]}`, `${add.value[3][1]}-${add.value[3][0]}`, `${add.value[4][1]}-${add.value[4][0]}`, `${add.value[5][1]}-${add.value[5][0]}`, `${add.value[6][1]}-${add.value[6][0]}`],
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '人数',
          min: 0,
          max: dataY.value,
          axisLabel: {
            formatter: '{value} 人',
          },
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
        },
      ],
      series: [
        {
          name: '总人数',
          type: 'bar',
          barGap: 0,
          label: labelOption,
          emphasis: {
            focus: 'series',
          },
          // eslint-disable-next-line max-len
          data: [num.value, num.value - day1.value, num.value - day1.value - day2.value, num.value - day1.value - day2.value - day3.value, num.value - day1.value - day2.value - day3.value - day4.value, num.value - day1.value - day2.value - day3.value - day4.value - day5.value, num.value - day1.value - day2.value - day3.value - day4.value - day5.value - day6.value],
        },
        {
          name: '今日新增',
          type: 'bar',
          barGap: 0,
          label: labelOption,
          emphasis: {
            focus: 'series',
          },
          // eslint-disable-next-line max-len
          data: [day1.value, day2.value, day3.value, day4.value, day5.value, day6.value, day7.value],
        },
        {
          name: '昨日新增',
          type: 'bar',
          barGap: 0,
          label: labelOption,
          emphasis: {
            focus: 'series',
          },
          // eslint-disable-next-line max-len
          data: [day2.value, day3.value, day4.value, day5.value, day6.value, day7.value, day8.value],
        },
      ],
    };

    // eslint-disable-next-line no-unused-expressions
    option && myChart.setOption(option);
};

</script>

<style scoped>
h4 {
    color: azure;
}
#main {
    height: 500px;
    width: 100%;
    margin-top: 50px;
}

.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 300px;
    height: 200px;
}
</style>
